<!DOCTYPE html>
<html lang="zh-cn">

    <head>
    <meta charset="utf-8">
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.5.2 -->
    <script>
        window.materialVersion = "1.5.2"
        // Delete localstorage with these tags
        window.oldVersion = [
            'codestartv1',
            '1.3.4',
            '1.4.0',
            '1.4.0b1',
            '1.5.0'
        ]
    </script>

    <!-- dns prefetch -->
    <meta http-equiv="x-dns-prefetch-control" content="on">




    <link rel="dns-prefetch" href="https://changyan.sohu.com"/>











    <!-- Meta & Info -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <!-- Title -->
    
    <title>
        
            vue或React中数据格式的转换 | 
        
        春日游, 杏花吹满头
    </title>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/labike/img/avatar.png">
    <link rel="icon" href="/labike/img/avatar.png">

    <meta name="format-detection" content="telephone=no"/>
    <meta name="description" itemprop="description" content="">
    <meta name="keywords" content=",数据格式">
    <meta name="theme-color" content="#0097A7">

    <!-- Disable Fucking Bloody Baidu Tranformation -->
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.en.js"></script>
        
    <![endif]-->

    <!-- Import lsloader -->
    <script>(function(){window.lsloader={jsRunSequence:[],jsnamemap:{},cssnamemap:{}};lsloader.removeLS=function(a){try{localStorage.removeItem(a)}catch(b){}};lsloader.setLS=function(a,c){try{localStorage.setItem(a,c)}catch(b){}};lsloader.getLS=function(a){var c="";try{c=localStorage.getItem(a)}catch(b){c=""}return c};versionString="/*"+(window.materialVersion||"unknownVersion")+"*/";lsloader.clean=function(){try{var b=[];for(var a=0;a<localStorage.length;a++){b.push(localStorage.key(a))}b.forEach(function(e){var f=lsloader.getLS(e);if(window.oldVersion){var d=window.oldVersion.reduce(function(g,h){return g||f.indexOf("/*"+h+"*/")!==-1},false);if(d){lsloader.removeLS(e)}}})}catch(c){}};lsloader.clean();lsloader.load=function(f,a,b,d){if(typeof b==="boolean"){d=b;b=undefined}d=d||false;b=b||function(){};var e;e=this.getLS(f);if(e&&e.indexOf(versionString)===-1){this.removeLS(f);this.requestResource(f,a,b,d);return}if(e){var c=e.split(versionString)[0];if(c!=a){console.log("reload:"+a);this.removeLS(f);this.requestResource(f,a,b,d);return}e=e.split(versionString)[1];if(d){this.jsRunSequence.push({name:f,code:e});this.runjs(a,f,e)}else{document.getElementById(f).appendChild(document.createTextNode(e));b()}}else{this.requestResource(f,a,b,d)}};lsloader.requestResource=function(b,e,a,c){var d=this;if(c){this.iojs(e,b,function(h,f,g){d.setLS(f,h+versionString+g);d.runjs(h,f,g)})}else{this.iocss(e,b,function(f){document.getElementById(b).appendChild(document.createTextNode(f));d.setLS(b,e+versionString+f)},a)}};lsloader.iojs=function(d,b,g){var a=this;a.jsRunSequence.push({name:b,code:""});try{var f=new XMLHttpRequest();f.open("get",d,true);f.onreadystatechange=function(){if(f.readyState==4){if((f.status>=200&&f.status<300)||f.status==304){if(f.response!=""){g(d,b,f.response);return}}a.jsfallback(d,b)}};f.send(null)}catch(c){a.jsfallback(d,b)}};lsloader.iocss=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.iofonts=function(f,c,h,a){var b=this;try{var g=new XMLHttpRequest();g.open("get",f,true);g.onreadystatechange=function(){if(g.readyState==4){if((g.status>=200&&g.status<300)||g.status==304){if(g.response!=""){h(g.response);a();return}}b.cssfallback(f,c,a)}};g.send(null)}catch(d){b.cssfallback(f,c,a)}};lsloader.runjs=function(f,c,e){if(!!c&&!!e){for(var b in this.jsRunSequence){if(this.jsRunSequence[b].name==c){this.jsRunSequence[b].code=e}}}if(!!this.jsRunSequence[0]&&!!this.jsRunSequence[0].code&&this.jsRunSequence[0].status!="failed"){var a=document.createElement("script");a.appendChild(document.createTextNode(this.jsRunSequence[0].code));a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);this.jsRunSequence.shift();if(this.jsRunSequence.length>0){this.runjs()}}else{if(!!this.jsRunSequence[0]&&this.jsRunSequence[0].status=="failed"){var d=this;var a=document.createElement("script");a.src=this.jsRunSequence[0].path;a.type="text/javascript";this.jsRunSequence[0].status="loading";a.onload=function(){d.jsRunSequence.shift();if(d.jsRunSequence.length>0){d.runjs()}};document.body.appendChild(a)}}};lsloader.tagLoad=function(b,a){this.jsRunSequence.push({name:a,code:"",path:b,status:"failed"});this.runjs()};lsloader.jsfallback=function(c,b){if(!!this.jsnamemap[b]){return}else{this.jsnamemap[b]=b}for(var a in this.jsRunSequence){if(this.jsRunSequence[a].name==b){this.jsRunSequence[a].code="";this.jsRunSequence[a].status="failed";this.jsRunSequence[a].path=c}}this.runjs()};lsloader.cssfallback=function(e,c,b){if(!!this.cssnamemap[c]){return}else{this.cssnamemap[c]=1}var d=document.createElement("link");d.type="text/css";d.href=e;d.rel="stylesheet";d.onload=d.onerror=b;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(d,a)};lsloader.runInlineScript=function(c,b){var a=document.getElementById(b).innerText;this.jsRunSequence.push({name:c,code:a});this.runjs()}})();</script>

    <!-- Import queue -->
    <script>function Queue(){this.dataStore=[];this.offer=b;this.poll=d;this.execNext=a;this.debug=false;this.startDebug=c;function b(e){if(this.debug){console.log("Offered a Queued Function.")}if(typeof e==="function"){this.dataStore.push(e)}else{console.log("You must offer a function.")}}function d(){if(this.debug){console.log("Polled a Queued Function.")}return this.dataStore.shift()}function a(){var e=this.poll();if(e!==undefined){if(this.debug){console.log("Run a Queued Function.")}e()}}function c(){this.debug=true}}var queue=new Queue();</script>

    <!-- Import CSS -->
    
        <style id="material_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_css","/labike/css/material.min.css?Z7a72R1E4SxzBKR/WGctOA==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
        <style id="style_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("style_css","/labike/css/style.min.css?MKetZV3cUTfDxvMffaOezg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>

        
            
                <style id="prettify_css"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_css","/labike/css/prettify.min.css?zp8STOU9v89XWFEnN+6YmQ==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
                <style id="prettify_theme"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("prettify_theme","/labike/css/prettify/github-v2.min.css?AfzKxt++K+/lhZBlSjnxwg==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>
            
        

    

    

    <!-- Config CSS -->

<!-- Other Styles -->
<style>
  body, html {
    font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    overflow-x: hidden !important;
  }
  
  code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  }

  a {
    color: #00838F;
  }

  .mdl-card__media,
  #search-label,
  #search-form-label:after,
  #scheme-Paradox .hot_tags-count,
  #scheme-Paradox .sidebar_archives-count,
  #scheme-Paradox .sidebar-colored .sidebar-header,
  #scheme-Paradox .sidebar-colored .sidebar-badge{
    background-color: #0097A7 !important;
  }

  /* Sidebar User Drop Down Menu Text Color */
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
  #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
    color: #0097A7 !important;
  }

  #post_entry-right-info,
  .sidebar-colored .sidebar-nav li:hover > a,
  .sidebar-colored .sidebar-nav li:hover > a i,
  .sidebar-colored .sidebar-nav li > a:hover,
  .sidebar-colored .sidebar-nav li > a:hover i,
  .sidebar-colored .sidebar-nav li > a:focus i,
  .sidebar-colored .sidebar-nav > .open > a,
  .sidebar-colored .sidebar-nav > .open > a:hover,
  .sidebar-colored .sidebar-nav > .open > a:focus,
  #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
    color: #0097A7 !important;
  }

  .toTop {
    background: #757575 !important;
  }

  .material-layout .material-post>.material-nav,
  .material-layout .material-index>.material-nav,
  .material-nav a {
    color: #757575;
  }

  #scheme-Paradox .MD-burger-layer {
    background-color: #757575;
  }

  #scheme-Paradox #post-toc-trigger-btn {
    color: #757575;
  }

  .post-toc a:hover {
    color: #00838F;
    text-decoration: underline;
  }

</style>


<!-- Theme Background Related-->

    <style>
      body{
        background-color: #F5F5F5;
      }

      /* blog_info bottom background */
      #scheme-Paradox .material-layout .something-else .mdl-card__supporting-text{
        background-color: #fff;
      }
    </style>




<!-- Fade Effect -->

    <style>
      .fade {
        transition: all 800ms linear;
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .fade.out{
        opacity: 0;
      }
    </style>


<!-- Import Font -->
<!-- Import Roboto -->

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">


<!-- Import Material Icons -->


    <style id="material_icons"></style><script>if(typeof window.lsLoadCSSMaxNums === "undefined")window.lsLoadCSSMaxNums = 0;window.lsLoadCSSMaxNums++;lsloader.load("material_icons","/labike/css/material-icons.css?pqhB/Rd/ab0H2+kZp0RDmw==",function(){if(typeof window.lsLoadCSSNums === "undefined")window.lsLoadCSSNums = 0;window.lsLoadCSSNums++;if(window.lsLoadCSSNums == window.lsLoadCSSMaxNums)document.documentElement.style.display="";}, false)</script>




    <!-- Import jQuery -->
    
        <script>lsloader.load("jq_js","/labike/js/jquery.min.js?ezyEvm8ST5CGfpA+kFFi1g==", true)</script>
    

    <!-- WebAPP Icons -->
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="application-name" content="春日游, 杏花吹满头">
    <meta name="msapplication-starturl" content="http://labike.gitee.io/labike/2021/03/26/dataTransform/">
    <meta name="msapplication-navbutton-color" content="#0097A7">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-title" content="春日游, 杏花吹满头">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon" href="/labike/img/avatar.png">

    <!-- Site Verification -->
    
    

    <!-- RSS -->
    

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="http://labike.gitee.io/labike/2021/03/26/dataTransform/">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="vue或React中数据格式的转换 | 春日游, 杏花吹满头">
    <meta property="og:image" content="/labike/img/avatar.png">
    <meta property="og:description" content="">
    <meta property="og:article:tag" content="数据格式"> 

    
        <meta property="article:published_time" content="Fri Mar 26 2021 13:31:42 GMT+0800">
        <meta property="article:modified_time" content="Fri Mar 26 2021 13:59:00 GMT+0800">
    

    <!-- The Twitter Card protocol -->
    <meta name="twitter:card" content="summary_large_image">

    <!-- Add canonical link for SEO -->
    
        <link rel="canonical" href="http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html" />
    

    <!-- Structured-data for SEO -->
    
        


<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "mainEntityOfPage": "http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html",
    "headline": "vue或React中数据格式的转换",
    "datePublished": "Fri Mar 26 2021 13:31:42 GMT+0800",
    "dateModified": "Fri Mar 26 2021 13:59:00 GMT+0800",
    "author": {
        "@type": "Person",
        "name": "labike",
        "image": {
            "@type": "ImageObject",
            "url": "/img/avatar.png"
        },
        "description": "Hi, nice to meet you"
    },
    "publisher": {
        "@type": "Organization",
        "name": "春日游, 杏花吹满头",
        "logo": {
            "@type":"ImageObject",
            "url": "/img/avatar.png"
        }
    },
    "keywords": ",数据格式",
    "description": "",
}
</script>


    

    <!-- Analytics -->
    
    
    

    <!-- Custom Head -->
    

<meta name="generator" content="Hexo 5.2.0"></head>


    
        <body id="scheme-Paradox" class="lazy">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span id="MD-burger-id" class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->


    <!-- Left aligned menu below button -->
    
    
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn" style="max-height:80vh; overflow-y:scroll;">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#%E8%BD%AC%E6%8D%A2%E6%96%B9%E6%B3%95"><span class="post-toc-number">1.</span> <span class="post-toc-text">转换方法</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#%E6%B8%B2%E6%9F%93%E6%95%B0%E6%8D%AE-Vue"><span class="post-toc-number">2.</span> <span class="post-toc-text">渲染数据(Vue)</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#%E7%89%B9%E6%AE%8A%E5%A4%84%E7%90%86-Vue"><span class="post-toc-number">3.</span> <span class="post-toc-text">特殊处理(Vue)</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#%E5%9C%A8React%E4%B8%AD%E8%BD%AC%E6%8D%A2%E6%B8%B2%E6%9F%93"><span class="post-toc-number">4.</span> <span class="post-toc-text">在React中转换渲染</span></a></li></ol>
    </ul>
    




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script type="text/ls-javascript" id="post-thumbnail-script">
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').attr('data-original', '/labike/img/random/material-' + randomNum + '.png');
    $('.post_thumbnail-random').addClass('lazy');
</script>

        
    
            <p class="article-headline-p">
                vue或React中数据格式的转换
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/labike/img/avatar.png" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>labike</strong>
        <span>3月 26, 2021</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-none-link" href="/labike/tags/%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F/" rel="tag">数据格式</a>
    </ul>
    

    <!-- Share -->
    
        <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=vue或React中数据格式的转换&url=http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html&pic=http://labike.gitee.io/img/avatar.png&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=vue或React中数据格式的转换&url=http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html&via=labike" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=http://labike.gitee.io/labike/2021/03/26/dataTransform/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    

    <!-- Share QQ -->
    

    <!-- Share Telegram -->
    
</ul>

    
</div>

                

                <!-- Post Content -->
                <div id="post-content" class="mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <p>在开发中最常见的业务就是渲染数据了, 通常情况下接口会返回下面这样的数据类型:</p>
<pre><code>&#123;
  code: 1,
  message: &#39;success&#39;,
  data: &#123;
    list: [
      &#123;
        id: 1,
        name: &#39;zzz&#39;
      &#125;,
      &#123;
        id: 2,
        name: &#39;ccc&#39;
      &#125;
      ...
    ]
  &#125;
&#125;</code></pre>
<p>这种格式非常好处理, 但有时候我们也会碰到一些特殊的业务功能需要对数据进行转换处理, 比如下面这种业务模式: 需要根据时间来计算某一时间段内有多少笔订单, 订单金额总共多少, 并且渲染出该时间段内的订单.</p>
<p>但是接口数据并不是按照时间进行返回的, 而是类似于上面这种:</p>
<pre><code>&#123;
  data: &#123;
    list: [
      &#123;
        id: 1,
        name: &#39;zzz&#39;,
        time: &#39;2021-02-01&#39;
      &#125;,
      &#123;
        id: 2,
        name: &#39;ccc&#39;,
        time: 2021-02-02&#39;
      &#125;,
      &#123;
        id: 3,
        name: &#39;ddd&#39;,
        time: &#39;2021-02-01&#39;
      &#125;
      ...
    ]
  &#125;
&#125;</code></pre>
<p>在这种情况下我们前端就要对数据进行转换, 以方便在页面上渲染.</p>
<h4 id="转换方法"><a href="#转换方法" class="headerlink" title="转换方法"></a>转换方法</h4><pre><code>const group = () =&gt; &#123;
  const obj = &#123;&#125;
  if (Array.isArray(arr)) &#123;
    for (var i = 0; i &lt; arr.length; ++i) &#123;
      var up_time = arr[i].up_time
      if (up_time in obj) obj[up_time].push(arr[i])
      else obj[up_time] = [arr[i]]
    &#125;
  &#125;
  // console.log(&#39;obj&#39;, obj)
  return obj
&#125;

getDataList().then(res =&gt; &#123;
  const &#123;code, message, data&#125; = res

  const arr = []

  const tempList = group(data.list)

  for (let i in tempList) &#123;
    let o = &#123;&#125;;
    //即添加了key值也赋了value值 o[i] 相当于o.name 此时i为变量
    o[i] = tempList[i]; 
    arr.push(o)
  &#125;
  // this.dataList即为我们要在页面上渲染的数据
  this.dataList = arr
&#125;)</code></pre>
<p>最后返回的dataList格式为</p>
<pre><code>[
  &#123;
    &#39;2020-02-01&#39;: [
      &#123;
        id: 1
        name: &#39;zzz&#39;,
        time: &#39;2020-02-01&#39;
      &#125;,
      &#123;
        id: 3,
        name: &#39;ddd&#39;,
        time: &#39;2020-02-01&#39;
      &#125;
    ]
  &#125;,
  &#123;
    &#39;2020-02-02&#39;: [
      &#123;
        id: 2,
        name: &#39;ccc&#39;,
        time: &#39;2020-02-02&#39;
      &#125;
    ]
  &#125;
]</code></pre>
<h4 id="渲染数据-Vue"><a href="#渲染数据-Vue" class="headerlink" title="渲染数据(Vue)"></a>渲染数据(Vue)</h4><pre><code>&lt;scroll-view scroll-y=&quot;true&quot; v-if=&quot;TabCur === 0&quot;&gt;
  &lt;view class=&quot;ready-list&quot; v-if=&quot;dataList.length &gt; 0&quot;&gt;
    &lt;view class=&quot;ready-list-box&quot; v-for=&quot;(item, index) in dataList&quot; :key=&quot;index&quot;&gt;
      &lt;view class=&quot;&quot; v-for=&quot;(value, key, index) in item&quot; :key=&quot;key&quot;&gt;
        &lt;!-- &#123;&#123;value&#125;&#125;---&#123;&#123;key&#125;&#125;--&#123;&#123;index&#125;&#125; --&gt;
        &lt;view class=&quot;time&quot;&gt;
          &lt;text&gt;&#123;&#123;key | timeFormat&#125;&#125;&lt;/text&gt;
        &lt;/view&gt;
        &lt;view class=&quot;statistic_box&quot;&gt;
          &lt;view class=&quot;statistic_top&quot;&gt;
            &lt;view class=&quot;statistic_top--left&quot;&gt;
              &lt;text&gt;&#123;&#123;value.length || '0'&#125;&#125;&lt;/text&gt;
              &lt;text&gt;收款笔数&lt;/text&gt;
            &lt;/view&gt;
            &lt;view class=&quot;statistic_top--right&quot;&gt;
              &lt;text v-if=&quot;value.length &gt; 0&quot;&gt;&#123;&#123;value | filterAmount&#125;&#125;&lt;/text&gt;
              &lt;text v-else&gt;0.00&lt;/text&gt;
              &lt;text&gt;实收金额(元)&lt;/text&gt;
            &lt;/view&gt;
          &lt;/view&gt;
        &lt;/view&gt;
        &lt;view class=&quot;&quot; v-for=&quot;subItem in value&quot; :key=&quot;subItem.id&quot;&gt;
          &lt;view class=&quot;statistic_box&quot;&gt;
            &lt;view class=&quot;statistic_bottom&quot;&gt;
              &lt;view class=&quot;statistic_bottom--bottomLeft&quot;&gt;
                &lt;u-icon
                  name=&quot;zhifubao-circle-fill&quot;
                  color=&quot;#2979ff&quot;
                  size=&quot;80&quot;
                  v-if=&quot;subItem.pay_type === &#39;zfb&#39;&quot;
                &gt;&lt;/u-icon&gt;
                &lt;u-icon
                  name=&quot;weixin-circle-fill&quot;
                  color=&quot;#2979ff&quot;
                  size=&quot;80&quot;
                  v-else
                &gt;&lt;/u-icon&gt;
                &lt;view class=&quot;statistic_bottom--bottomLeft-data&quot;&gt;
                  &lt;text&gt;&#123;&#123;$u.timeFormat(subItem.up_time, 'hh:MM:ss')&#125;&#125;&lt;/text&gt;
                    &lt;text&gt;[收款]&#123;&#123;subItem.shop_name&#125;&#125;&lt;/text&gt;
                &lt;/view&gt;
              &lt;/view&gt;
              &lt;view class=&quot;statistic_bottom--bottomRight&quot;&gt;
                &lt;text&gt;&#123;&#123;subItem.price&#125;&#125;&lt;/text&gt;
                &lt;text&gt;交易成功&lt;/text&gt;
              &lt;/view&gt;
            &lt;/view&gt;
          &lt;/view&gt;
        &lt;/view&gt;
      &lt;/view&gt;
    &lt;/view&gt;
  &lt;/view&gt;
  &lt;view class=&quot;load-more&quot; @click=&quot;loadMore&quot;&gt;
    &lt;text&gt;&#123;&#123;tips&#125;&#125;&lt;/text&gt;
  &lt;/view&gt;
&lt;/scroll-view&gt;</code></pre>
<h4 id="特殊处理-Vue"><a href="#特殊处理-Vue" class="headerlink" title="特殊处理(Vue)"></a>特殊处理(Vue)</h4><p>上面的例子中由于我们转换的数据的格式的特殊性, 虽然渲染到页面上了但业务中一些其他要求比如计算2020-02-01时间内所有订单额的总和就有些问题了, 我们无法直接在页面中进行计算, 所以这里通过过滤器进行计算.</p>
<pre><code>filters: &#123;
  filterAmount(value) &#123;
    let num = 0
    value.forEach(i =&gt; &#123;
      sum += i.price
    &#125;)
    return sum
  &#125;
&#125;</code></pre>
<p>另外我们在页面中对value进行了判断, 因为value初始化渲染时是null或者undefined, 如果要用过滤器计算订单总额这里的value必须是Array, 否则渲染时会报错’value.forEach() is not a function’</p>
<h4 id="在React中转换渲染"><a href="#在React中转换渲染" class="headerlink" title="在React中转换渲染"></a>在React中转换渲染</h4><pre><code>function filterAmount(value) &#123;
  if (value.length === 0) return 0
  var sum = 0
  value.forEach(i =&gt; &#123;
    sum += Number(i.price)
  &#125;)
  return sum
&#125;

const getBill = async (params) =&gt; &#123;
  const &#123;code, data, message&#125; = await bill(params)
  console.log(params, data)
  var arr = []
  if (code === 1) &#123;
    // 如果当前页返回数据长度大于0则先将上一页数据和当前页数据进行合并然后转换
    // 否则说明当前页没有数据, 返回上一页数据
    var _tempData = []
    // 第二页没有数据, 返回临时数据
    if (data.list.length &gt; 0) &#123;
      // 第一次请求有数据, 临时存数据[]和返回数据合并
        _tempData = group(tempCancelBillData.concat(data.list))
      // 缓存上一次数据
      setTempCancelBillData(data.list)
    &#125; else &#123;
      _tempData = []
    &#125;
    for (let i in _tempData) &#123;
      let o = &#123;&#125;;
      o[i] = _tempData[i];
      arr.push(o)
    &#125;
    setBillData(arr)
  &#125; else &#123;
    return
  &#125;
&#125;

&lt;ScrollView
  refreshControl = &#123;
    &lt;RefreshControl
      refreshing=&#123;isRefreshing&#125;
      onRefresh = &#123;onRefreshHandle&#125;
    /&gt;
  &#125;
&gt;
  &#123;
    billData.length &gt; 0
    ? billData.map((item, index) =&gt; &#123;
        return (
          &lt;View key=&#123;index&#125; style=&#123;styles.itemBox&#125;&gt;
            &#123;
              Object.entries(item).map(([key, value], index) =&gt; &#123;
                return (
                  &lt;View key=&#123;index&#125;&gt;
                    &lt;View style=&#123;styles.time&#125;&gt;
                      &lt;Text&gt;
                        &#123;
                          key ?
                            moment.unix(Number(key)).format(&#39;YYYY-MM-DD&#39;) :
                            &#39;&#39;
                        &#125;
                      &lt;/Text&gt;
                    &lt;/View&gt;
                    &lt;View style=&#123;styles.mid&#125;&gt;
                      &lt;View style=&#123;styles.midLeft&#125;&gt;
                        &lt;Text&gt;&#123;value.length&#125;&lt;/Text&gt;
                        &lt;Text&gt;收款笔数&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style=&#123;styles.midRight&#125;&gt;
                        &lt;Text&gt;
                          &#123;
                            filterAmount(value)
                          &#125;
                        &lt;/Text&gt;
                        &lt;Text&gt;实收金额(元)&lt;/Text&gt;
                      &lt;/View&gt;
                    &lt;/View&gt;
                    &lt;View style=&#123;styles.bottom&#125;&gt;
                      &#123;
                        value.map((subItem, index) =&gt; &#123;
                          return (
                            &lt;View key=&#123;index&#125; style=&#123;styles.bottomBox&#125;&gt;
                              &lt;View style=&#123;styles.bottomLeft&#125;&gt;
                                &lt;Image style=&#123;styles.img&#125; source=&#123;require(&#39;../assets/auth.png&#39;)&#125; /&gt;
                                &lt;View style=&#123;styles.bottomLeftData&#125;&gt;
                                  &lt;Text&gt;
                                    &#123;
                                      subItem.up_time ?
                                        moment.unix(Number(subItem.up_time)).format(&#39;YYYY-MM-DD HH:mm:ss&#39;) :
                                        &#39;&#39;
                                    &#125;
                                  &lt;/Text&gt;
                                  &lt;Text&gt;[收款]&#123;subItem.shop_name&#125;&lt;/Text&gt;
                                &lt;/View&gt;
                              &lt;/View&gt;
                              &lt;View style=&#123;styles.bottomRight&#125;&gt;
                                &lt;Text&gt;&#123;subItem.price&#125;&lt;/Text&gt;
                                &lt;Text&gt;交易成功&lt;/Text&gt;
                              &lt;/View&gt;
                            &lt;/View&gt;
                          )
                        &#125;)
                      &#125;
                    &lt;/View&gt;
                  &lt;/View&gt;
                )
              &#125;)
            &#125;
          &lt;/View&gt;
        )
    &#125;) : null
  &#125;
&lt;/ScrollView&gt;</code></pre>
<p>以上就是在业务中对数据进行特殊转换的例子.</p>

        
    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <!-- 使用 changyan -->
<div id="changyan-comment">
    <!--PC和WAP自适应版-->
<div id="SOHUCS" sid="2021/03/26/dataTransform/"  ></div>
<script type="text/javascript">
(function(){
var appid = 'cyv74isYm';
var conf = '315a48df5a37b43bb5aa8f6dbc43ac3c';
var width = window.innerWidth || document.documentElement.clientWidth;
if (width < 960) {
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

</div>
<style>
    #changyan-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>

                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/labike/2021/04/26/react-native/" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/labike/2021/02/24/uniappNavigationBar/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/labike/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/labike/img/avatar.png" alt="labike's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        ddmmy@hotmail.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="mailto: ddmmy@hotmail.com" target="_blank" title="Email Me">
                        
                            <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    
        <li id="sidebar-first-li">
            <a href="/labike/">
                
                    <i class="material-icons sidebar-material-icons">home</i>
                
                主页
            </a>
        </li>
        
    

    <!-- Archives  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">inbox</i>
                
                    归档
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
            <li>
                <a class="sidebar_archives-link" href="/labike/archives/2021/05/">五月 2021<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2021/04/">四月 2021<span class="sidebar_archives-count">2</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2021/03/">三月 2021<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2021/02/">二月 2021<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2020/12/">十二月 2020<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2020/11/">十一月 2020<span class="sidebar_archives-count">24</span></a></li><li><a class="sidebar_archives-link" href="/labike/archives/2020/10/">十月 2020<span class="sidebar_archives-count">9</span></a>
            </ul>
        </li>
        
    

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                
                    <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/labike/categories/%E5%85%B6%E4%BB%96/">其他<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/labike/categories/%E5%89%8D%E7%AB%AF/">前端<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/labike/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构<span class="sidebar_archives-count">10</span></a></li><li><a class="sidebar_archives-link" href="/labike/categories/%E7%AE%97%E6%B3%95/">算法<span class="sidebar_archives-count">19</span></a>
            </ul>
        </li>
        
    

    <!-- Pages  -->
    
        <li>
            <a href="/links" title="友情链接">
                
                    <i class="material-icons sidebar-material-icons">face</i>
                
                友情链接
            </a>
        </li>
        
    
        <li>
            <a href="/tags" title="标签">
                
                    <i class="material-icons sidebar-material-icons">cloud_circle</i>
                
                标签
            </a>
        </li>
        
    

    <!-- Article Number  -->
    
</ul>


        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Sidebar Divider -->

    <div class="sidebar-divider"></div>


<!-- Theme Material -->

    <a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
        <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
            主题 - Material
            <span class="sidebar-badge badge-circle">i</span>
        </div>
    </a>


<!-- Help & Support -->
<!--

-->

<!-- Feedback -->
<!--

-->

<!-- About Theme -->
<!--

-->

    </div>

    <!-- Sidebar Image -->
    

</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div id="back-to-top" class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    

    <!-- Facebook -->
    

    <!-- Google + -->
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    

    <!-- Tumblr -->
    

    <!-- Github -->
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
    
    <!-- V2EX -->
    
</div>

        
        <!--Copyright-->
        <div id="copyright">
            <a style="text-decoration: none;" target="_blank" rel="noopener" href="https://beian.miit.gov.cn">陕ICP备17012824号-1</a>
            Copyright&nbsp;©&nbsp;2018&nbsp;-<script type="text/javascript">var fd = new Date();document.write("&nbsp;" + fd.getFullYear() + "&nbsp;");</script>春日游, 杏花吹满头
            
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import JS File -->

    <script>lsloader.load("lazyload_js","/labike/js/lazyload.min.js?wgjW/HuQG9JDgvPDPoRAng==", true)</script>



    <script>lsloader.load("js_js","/labike/js/js.min.js?d+XW6aNuIPgOn1iA7NnB4g==", true)</script>



    <script>lsloader.load("np_js","/labike/js/nprogress.js?pl3Qhb9lvqR1FlyLUna1Yw==", true)</script>


<script type="text/ls-javascript" id="NProgress-script">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();
    $('#nprogress .bar').css({
        'background': '#29d'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #29d, 0 0 15px #29d'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#29d',
        'border-left-color': '#29d'
    });
    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>









   <!-- 畅言公共 js 代码 start -->
<script id="cy_cmt_num" src="https://changyan.sohu.com/upload/plugins/plugins.list.count.js?clientId=cyv74isYm">
</script>
<!-- 畅言公共 js 代码 end -->





<!-- UC Browser Compatible -->
<script>
	var agent = navigator.userAgent.toLowerCase();
	if(agent.indexOf('ucbrowser')>0) {
		document.write('
<link rel="stylesheet" href="/labike/css/uc.css">
');
	   alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
	}
</script>

<!-- Import prettify js  -->

    
        
            <script>lsloader.load("prettify_js","/labike/js/prettify.min.js?WN07fivHQSMKWy7BmHBB6w==", true)</script>
        
    



<!-- Window Load -->
<!-- add class for prettify -->
<script type="text/ls-javascript" id="window-load">
    $(window).on('load', function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });

    
        
            $(function() {
                $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
                prettyPrint();
                })
        
    
    
</script>

<!-- MathJax Load-->


<!-- Bing Background -->


<script type="text/ls-javascript" id="lazy-load">
    // Offer LazyLoad
    queue.offer(function(){
        $('.lazy').lazyload({
            effect : 'show'
        });
    });

    // Start Queue
    $(document).ready(function(){
        setInterval(function(){
            queue.execNext();
        },200);
    });
</script>

<!-- Custom Footer -->



<script>
    (function(){
        var scriptList = document.querySelectorAll('script[type="text/ls-javascript"]')

        for (var i = 0; i < scriptList.length; ++i) {
            var item = scriptList[i];
            lsloader.runInlineScript(item.id,item.id);
        }
    })()
console.log('\n %c © Material Theme | Version: 1.5.2 | https://github.com/viosey/hexo-theme-material %c \n', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-left-radius:5px;border-bottom-left-radius:5px;', 'color:#455a64;background:#e0e0e0;padding:5px 0;border-top-right-radius:5px;border-bottom-right-radius:5px;');
</script>

                </main>
            </div>
        </body>
    
</html>
